<template>
	<div>
		<el-form ref="searchFormRef" :model="searchForm">
			<el-row class="mb-20">
				<el-col :span="6">
					<el-form-item label="业主单位" prop="proprietor" label-width="100px">
						<el-input v-model="searchForm.proprietor" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="供应单位" prop="supplier" label-width="100px">
						<el-input v-model="searchForm.supplier" />
					</el-form-item>
				</el-col>
				<el-col :span="6" :offset="1">
					<el-form-item>
						<el-button formDialogRef icon="search" type="primary" @click="handleSearch"> 搜索 </el-button>
						<el-button icon="Refresh" formDialogRef @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div class="mb-20">
			<el-button type="primary" @click="handleAddClick">新增</el-button>
		</div>
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column type="index" width="100" label="#" />
			<el-table-column prop="proprietor" label="业主单位" width="300" />
			<el-table-column prop="supplier" label="供应单位" width="300" />
			<el-table-column prop="placeOfDelivery" label="交货地" width="300" />
			<el-table-column prop="placeOfDispatch" label="发货地" width="300" />
			<el-table-column prop="weight" label="成交重量（吨）" width="140" />
			<el-table-column prop="totalPrice" label="成交总价（元）" width="140" />
			<el-table-column prop="dealDate" label="成交日期" />
			<el-table-column prop="settlementMethod" label="结算方式" />
			<el-table-column prop="breed" label="品种" />
			<el-table-column prop="quality" label="品质" />
			<el-table-column prop="price" label="单价" />
			<el-table-column prop="transportMode" label="运输方式" />
			<el-table-column prop="invoiceMethod" label="发票方式" />
			<el-table-column prop="createDate" label="创建日期" width="180" />
			<el-table-column label="操作" width="140" fixed="right">
				<template #default="scope">
					<el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex-center">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[100, 200, 300, 400]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		<el-dialog v-model="centerDialogVisible" title="新增" width="75%" align-center>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
				<el-form-item label="业主单位" prop="proprietor">
					<el-input v-model="ruleForm.proprietor" />
				</el-form-item>
				<el-form-item label="供应单位" prop="supplier">
					<el-input v-model="ruleForm.supplier" />
				</el-form-item>
				<el-form-item label="交货地" prop="placeOfDelivery">
					<el-input v-model="ruleForm.placeOfDelivery" />
				</el-form-item>
				<el-form-item label="发货地" prop="placeOfDispatch">
					<el-input v-model="ruleForm.placeOfDispatch" />
				</el-form-item>
				<el-form-item label="成交重量" prop="weight">
					<el-input v-model="ruleForm.weight" />
				</el-form-item>
				<el-form-item label="成交总价" prop="totalPrice">
					<el-input v-model="ruleForm.totalPrice" />
				</el-form-item>
				<el-form-item label="成交日期" prop="dealDate">
					<el-date-picker
						v-model="ruleForm.dealDate"
						type="date"
						format="YYYY/MM/DD"
						value-format="YYYY-MM-DD"
						placeholder="选择日期"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="结算方式" prop="settlementMethod">
					<el-input v-model="ruleForm.settlementMethod" />
				</el-form-item>
				<el-form-item label="品种" prop="breed">
					<el-input v-model="ruleForm.breed" />
				</el-form-item>
				<el-form-item label="品质" prop="quality">
					<el-input v-model="ruleForm.quality" />
				</el-form-item>
				<el-form-item label="单价" prop="price">
					<el-input v-model="ruleForm.price" />
				</el-form-item>
				<el-form-item label="运输方式" prop="transportMode">
					<el-input v-model="ruleForm.transportMode" />
				</el-form-item>
				<el-form-item label="发票方式" prop="invoiceMethod">
					<el-input v-model="ruleForm.invoiceMethod" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleDialogClose()">关闭</el-button>
					<el-button type="primary" @click="handleFormAddClick(ruleFormRef)"> {{ addOrEdit ? '编辑' : '新增' }} </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { fetchList, addObj, delObjs, editObj } from '/@/api/miniProgram/index';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// 表格内容逻辑
const tableRowClassName = ({ rowIndex }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};
let tableData = ref([]);

// 表格删除
const handleDelete = (index, row) => {
	// console.log(index, row);
	delObjs(row.coalCompanyId).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			centerDialogVisible.value = false;
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
// 表格分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
	getFetchList();
});
const getFetchList = () => {
	fetchList({
		current: currentPage.value,
		size: pageSize.value,
		...searchForm.value,
	})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				tableData.value = data.records;
				total.value = data.total;
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getFetchList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getFetchList();
};
// 表单搜索
const searchFormRef = ref();
const searchForm = ref({
	proprietor: '',
	supplier: '',
});
const handleSearch = () => {
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
const resetQuery = () => {
	searchFormRef.value.resetFields();
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
// -----------------------------------------弹窗以及表单逻辑---------------------------
const centerDialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
	proprietor: '',
	supplier: '',
	placeOfDelivery: '',
	placeOfDispatch: '',
	weight: '',
	totalPrice: '',
	dealDate: '',
	settlementMethod: '',
	breed: '',
	quality: '',
	price: '',
	transportMode: '',
	invoiceMethod: '',
});
const rules = reactive({
	proprietor: [{ required: true, message: '请输入', trigger: 'blur' }],
	supplier: [{ required: true, message: '请输入', trigger: 'blur' }],
	placeOfDelivery: [{ required: true, message: '请输入', trigger: 'blur' }],
	placeOfDispatch: [{ required: true, message: '请输入', trigger: 'blur' }],
	weight: [{ required: true, message: '请输入', trigger: 'blur' }],
	totalPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
	dealDate: [{ required: true, message: '请输入', trigger: 'blur' }],
	settlementMethod: [{ required: true, message: '请输入', trigger: 'blur' }],
	breed: [{ required: true, message: '请输入', trigger: 'blur' }],
	quality: [{ required: true, message: '请输入', trigger: 'blur' }],
	price: [{ required: true, message: '请输入', trigger: 'blur' }],
	transportMode: [{ required: true, message: '请输入', trigger: 'blur' }],
	invoiceMethod: [{ required: true, message: '请输入', trigger: 'blur' }],
});
const handleAddClick = () => {
	centerDialogVisible.value = true;
};
let addOrEdit = ref(false);
// 新增
const handleFormAddClick = (formEl, row) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			if (addOrEdit.value) {
				editInfo(formEl);
			} else {
				addInfo(formEl);
			}
		}
	});
};
const handleEdit = (row) => {
	centerDialogVisible.value = true;
	nextTick(() => {
		ruleForm.value = row;
	});
	addOrEdit.value = true;
};
const handleDialogClose = () => {
	ruleFormRef.value.resetFields();
	centerDialogVisible.value = false;
};
const addInfo = () => {
	addObj({
		...ruleForm.value,
	}).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '新增成功',
				type: 'success',
			});
			handleDialogClose();
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};

const editInfo = () => {
	editObj({
		...ruleForm.value,
	}).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '更新成功',
				type: 'success',
			});
			handleDialogClose();
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
</script>
<style scoped>
.mb-20 {
	margin-bottom: 20px;
}

.el-pagination {
	justify-content: center !important;
}
</style>
